<template>
    <el-container :class="theme()">
        <el-aside width="200px" class="el-aside-aside">
            <el-row class="tac">
                <el-col>
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                        background-color="var(--background-color-dh)" text-color="var(--text-color-dh) "
                        active-text-color="var(--active-text-color-dh)">
                        <el-menu-item index="1" @click="gotoHome()">
                            <i class="el-icon-star-off"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-search"></i>
                                <span>信息管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1" @click="gotoUser()">成员管理</el-menu-item>
                                <el-menu-item index="2-2" @click="gotoOperate()">操作管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-refresh"></i>
                                <span>主题切换</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="3-1" @click="dark()">暗黑</el-menu-item>
                                <el-menu-item index="3-2" @click="sweet()">甜橙</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </el-aside>
        <el-container>
            <el-header>
                <el-menu default-active="3" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    background-color="var(--background-color-dh)" text-color="#fff" active-text-color="#ffd04b">
                    <el-submenu index="1" style="position:relative;left: 90%;">
                        <template slot="title">用户</template>
                        <el-menu-item index="2-1" @click="exit()">退出</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
            <el-main>
                <el-container class="home" v-if="selectPart() == 0">
                    <el-aside style="width: 40%;" class="el-aside-main">
                        <el-row>
                            <div class="head">
                                <el-avatar shape="square" class="head-image" :src="user.image"></el-avatar>
                            </div>
                        </el-row>
                        <el-row style="width: 80%;position:relative; left: 10%; bottom: 10%;">
                            <el-card class="box-card">
                                <div>
                                </div>
                            </el-card>
                        </el-row>
                    </el-aside>
                    <el-main style="height: 100%; ">
                        <el-calendar v-model="value" class="calendar">
                        </el-calendar>
                    </el-main>
                </el-container>
                <user-view v-else-if="selectPart() == 1"></user-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import UserView from './User-View.vue';
import store1 from '@/store/index'
export default {
    components: { UserView },
    data() {
        return {
            n: 1,
            m: 0,
            value: new Date(),
            user: JSON.parse(localStorage.getItem('user'))
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        exit() {
            store1.commit('delToken');
            this.$router.push('/');
        },

        /* 改变class值 */
        gotoUser() {
            this.m = 1;
        },
        gotoOperate() {
            this.m = 2;
        },
        gotoHome() {
            this.m = 0;
        },
        theme() {
            switch (this.n) {
                case 1:
                    return 'dark';
                case 2:
                    return 'sweet';
            }
        },
        dark() {
            this.n = 1;
        },
        sweet() {
            this.n = 2;
        },
        selectPart() {
            return this.m;
        },
    }
}
</script>

<style>
@import url('../css/theme.css');


.calendar {
    height: 100%;
}

.head-image {
    width: 80%;
    height: auto;
}

.el-avatar>img {
    width: 100%;
    height: auto;
}

.el-calendar__header {
    width: 90%;
    height: 10%;
}

.el-calendar__body {
    width: 90%;
    height: 85%;
}

.el-calendar-table {
    width: 100%;
    height: 90%;
}

.el-calendar-table .el-calendar-day {
    width: auto;
    height: auto;
}

.el-calendar-table thead th {
    height: auto;
}

thead {
    height: auto;
}

.home {
    height: 100%;
}
</style>